<!--  -->
<template>
  <div class="edit-container-custombox" v-if="dialogShow">
    <SetDesignDialog :title="name" :dialogVisible="dialogShow" :close="close" :saveclose="saveclose" :hasfooter="hasfooter" ref="settingDialog">
      <div class="edit-container-u">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="基本样式" name="1">
            <div class="grid-content bg-purple">
              <el-row>
                <el-col :span="12">
                  <PaddingTop :title="'顶部内间距'" :defValue="data.config.paddingTop" :chgValue="(d)=>{data.config.paddingTop = d}" />
                </el-col>
                <el-col :span="12">
                  <PaddingBottom :title="'底部内间距'" :defValue="data.config.paddingBottom" :chgValue="(d)=>{data.config.paddingBottom = d}" />
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <PaddingLeft :defValue="data.config.paddingLeft" :chgValue="(d)=>{data.config.paddingLeft = d}" />
                </el-col>
                <el-col :span="12">
                  <PaddingRight :defValue="data.config.paddingRight" :chgValue="(d)=>{data.config.paddingRight = d}" />
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form>
                    <el-form-item label="背景颜色" :label-width="formLabelWidth" style="margin-bottom: 0px;">
                      <el-color-picker style="height:40px;" :disabled="backgroundColor"
                        v-model="data.config.backgroundColor">
                      </el-color-picker>
                      <el-checkbox v-model="backgroundColor" style="top:-15px;">默认</el-checkbox>
                    </el-form-item>
                  </el-form>
                </el-col>
                <el-col :span="12">
                  <el-form @submit.native.prevent>
                    <el-form-item label="透明度" :label-width="formLabelWidth" style="margin-bottom: 0px;">
                      <el-input :disabled="disabledOpacity" size="mini" style="width:60px;"
                        v-model="data.config.opacity" maxlength="12" placeholder="1"></el-input>
                      <span class="tip-color1">例如：0.88 </span>
                    </el-form-item>
                  </el-form>
                </el-col>
              </el-row>
              <div>
                <el-form>
                  <el-form-item label="动画效果" :label-width="formLabelWidth" style="margin-bottom: 0px;">
                    <el-select @change="changeAnimate" size="mini" v-model="animate" placeholder="请选择">
                      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="栅格列表" name="2" v-if="layes < 3 && !iscomp">
            <div class="grid-content bg-purple cols-list">
              <div class="empty-notice-n" v-if="!containerRow">当前容器为空，请添加组件</div>
              <el-table v-loading="loading" v-else :data="containerRow" height="314"
                @cell-mouse-enter="handleMouseEnter" @cell-mouse-leave="handleMouseOut">
                <el-table-column label="序号" width="60" align="center">
                  <template slot-scope="scope">
                    {{scope.$index + 1}}
                  </template>
                </el-table-column>
                <el-table-column label="ID" align="center">
                  <template slot-scope="scope">
                    {{scope.row._other._tmpId}}
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="180" align="center">
                  <template slot-scope="scope">
                    <i :class="{'icon':true, 'iconfont':true, 'icon-jiantouarrow499':true, 'displayNo':isFirst(scope.$index)}"
                      @click="clickUp(scope.$index, scope.row._other._tmpId)"></i>
                    <i :class="{'icon':true, 'iconfont':true, 'icon-jiantouarrow505':true, 'displayNo':isLast(scope.$index)}"
                      @click="clickDown(scope.$index, scope.row._other._tmpId)"></i>
                    <i class="el-icon-delete" @click="deleteCol(scope.row._other._tmpId)"></i>
                  </template>
                </el-table-column>
              </el-table>
              <div class="add-btn">
                <el-button @click="addCol" type="success" size="small">添加</el-button>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </SetDesignDialog>
    <DialogAddContainerCustomCol ref="addContainerCustomCol" :tmpContainerId="containerData._other._tmpId" :updateBjContainerCols="updateBjContainerCols" />
  </div>
</template>

<script>
import SetDesignDialog from '@/components/common/dialog/SetDesignDialog.vue'
import DialogAddContainerCustomCol from '@/components/common/design/dialog/DialogAddContainerCustomCol.vue'
import PaddingTop from '@/components/common/design/dialog/component/formitem/PaddingTop.vue'
import PaddingBottom from '@/components/common/design/dialog/component/formitem/PaddingBottom.vue'
import PaddingLeft from '@/components/common/design/dialog/component/formitem/PaddingLeft.vue'
import PaddingRight from '@/components/common/design/dialog/component/formitem/PaddingRight.vue'
import * as WindowType from '@/config/windowtype.js'
// import * as PubsubType from '@/config/pubsubtype.js'
import VueFunctions from '@/core/VueFunctions.js'
import BackendjsFunctions from '@/core/BackendjsFunctions.js'
import { mapState } from 'vuex'
// import PubSub from 'pubsub-js'
import _ from 'lodash'
export default {
  computed: {
    ...mapState([
      'design'
    ]),
    disabledOpacity () {
      // if ([1, 2, 3, 4, 13, 15, 16].indexOf(parseInt(this.animate)) > -1) {
      //   return true
      // }
      return false
    },
    isFirst () {
      return function (index) {
        if (index === 0) {
          return true
        } else {
          return false
        }
      }
    },
    isLast () {
      return function (index) {
        let len = this.containerRow.length
        if (index === (len - 1)) {
          return true
        } else {
          return false
        }
      }
    }
  },
  created () {
    // 编辑 box 配置参数
    VueFunctions.method(WindowType.EDIT_CONTAINER_CUSTOMBOX, (containerData, layes, containerRow) => {
      this.close()
      this.dialogShow = true
      this.defaultShow = '1'
      this.containerData = containerData
      this.data = containerData.render.data
      this.layes = layes

      let item = this.data.config.animate.className ? this.options.find(element => {
        return element.animate.className === this.data.config.animate.className
      }) : null
      if (item) {
        this.animate = item.value
      } else {
        this.animate = '0'
      }
      this.backgroundColor = !this.data.config.backgroundColor
      this.backgroundWapColor = !this.data.config.wap.backgroundColor

      if (containerRow === null) {
        this.containerRow = []
      } else if (Array.isArray(containerRow)) {
        this.containerRow = containerRow
      } else {
        this.iscomp = true
      }

      this.$nextTick(() => {
        if (this.$refs['settingDialog']) {
          this.$refs['settingDialog'].open()
        }
      })
    })
  },
  mounted () {
    // PubSub.subscribe(PubsubType.PUBSUB_DIGLOG_COMPONENT_AND_CONTAINER_CLOSE, (event, data) => {
    //   this.close()
    // })
  },
  data () {
    return {
      dialogShow: false,
      loading: false,
      formLabelWidth: '120px',
      name: '容器设置',
      activeName: '1',
      hasfooter: true,
      containerData: null,
      data: null,
      containerRow: null,
      layes: -1,
      iscomp: false,
      // 控制
      backgroundColor: false,
      backgroundWapColor: false,
      options: options,
      animate: null
    }
  },
  watch: {
    backgroundColor: {
      handler () {
        if (this.backgroundColor) {
          this.data.config.backgroundColor = null
        }
      },
      deep: true
    },
    backgroundWapColor: {
      handler () {
        if (this.backgroundWapColor) {
          this.data.config.wap.backgroundColor = null
        }
      },
      deep: true
    }
  },
  methods: {
    // 标签切换触发
    handleClick (tab, event) {
      if (tab.name === '2') {
        this.hasfooter = false
      } else {
        this.hasfooter = true
      }
    },
    changeAnimate (value) {
      let item = this.options.find(element => {
        return parseInt(element.value) === parseInt(value)
      })
      if (item) {
        this.data.config.animate = item.animate
      } else {
        this.data.config.animate = ''
      }
    },
    clickUp (index, tmpId) {
      if (!this.isFirst(index)) {
        let arrId = []
        this.containerRow.forEach(el => {
          arrId.push(el._other._tmpId)
        })
        if (arrId.indexOf(tmpId) > -1) {
          let filterArr = this.containerRow.splice(arrId.indexOf(tmpId), 1)
          this.containerRow.splice(arrId.indexOf(tmpId) - 1, 0, filterArr[0])
          BackendjsFunctions.sortContainerCustomcol(_.cloneDeep(this.containerRow))
        }
      }
    },
    clickDown (index, tmpId) {
      if (!this.isLast(index)) {
        let arrId = []
        this.containerRow.forEach(el => {
          arrId.push(el._other._tmpId)
        })
        if (arrId.indexOf(tmpId) > -1) {
          let filterArr = this.containerRow.splice(arrId.indexOf(tmpId), 1)
          this.containerRow.splice(arrId.indexOf(tmpId) + 1, 0, filterArr[0])
          BackendjsFunctions.sortContainerCustomcol(_.cloneDeep(this.containerRow))
        }
      }
    },
    deleteCol (tmpId) {
      let isDelete = BackendjsFunctions.isDelContainerCustomColBox(tmpId)
      if (isDelete) {
        this.containerRow = _.cloneDeep(BackendjsFunctions.delContainerCustomcol(tmpId))
      }
    },
    addCol () {
      this.$refs['addContainerCustomCol'].show()
    },
    updateBjContainerCols (fellbackdata) {
      this.containerRow = _.cloneDeep(fellbackdata)
    },
    handleMouseEnter (row, column, cell, event) {
      BackendjsFunctions.showShadowCustomContainer(row._other._tmpId)
      BackendjsFunctions.scrollCustomContainer(row._other._tmpId)
    },
    handleMouseOut (row, column, cell, event) {
      let hasTmpId = this.containerRow.filter(item => {
        return item._other._tmpId === row._other._tmpId
      })
      if (hasTmpId.length > 0) {
        BackendjsFunctions.hideAllShadowCustomContainer(row._other._tmpId)
      }
    },
    close () {
      this.dialogShow = false
      this.containerData = null
      this.activeName = '1'
      this.hasfooter = true
      this.data = null
      this.layes = -1
      this.iscomp = false
    },
    saveclose () {
      this.containerData.render.data = _.cloneDeep(this.data)
      BackendjsFunctions.setContainerCustombox(this.containerData)
      this.close()
    }
  },
  components: {
    SetDesignDialog,
    DialogAddContainerCustomCol,
    PaddingTop,
    PaddingBottom,
    PaddingLeft,
    PaddingRight
  }
}
const options = [{
  value: '0',
  label: '无',
  animate: {
    className: '',
    dataDelay: '',
    dataAnimate: ''
  }
}, {
  value: '1',
  label: '从左至右切入',
  animate: {
    className: 'fadeInLeft animated',
    dataDelay: '',
    dataAnimate: 'fadeInLeft'
  }
}, {
  value: '2',
  label: '从右至左切入',
  animate: {
    className: 'fadeInRight animated',
    dataDelay: '',
    dataAnimate: 'fadeInRight'
  }
}, {
  value: '3',
  label: '从下至上切入',
  animate: {
    className: 'fadeInUp animated',
    dataDelay: '',
    dataAnimate: 'fadeInUp'
  }
}, {
  value: '4',
  label: '从上至下切入',
  animate: {
    className: 'fadeInDown animated',
    dataDelay: '',
    dataAnimate: 'fadeInDown'
  }
}, {
  value: '5',
  label: '从左至右飞入',
  animate: {
    className: 'bounceInLeft animated',
    dataDelay: '',
    dataAnimate: 'bounceInLeft'
  }
}, {
  value: '6',
  label: '从右至左飞入',
  animate: {
    className: 'bounceInRight animated',
    dataDelay: '',
    dataAnimate: 'bounceInRight'
  }
}, {
  value: '7',
  label: '从下至上飞入',
  animate: {
    className: 'bounceInUp animated',
    dataDelay: '',
    dataAnimate: 'bounceInUp'
  }
}, {
  value: '8',
  label: '从上至下飞入',
  animate: {
    className: 'bounceInDown animated',
    dataDelay: '',
    dataAnimate: 'bounceInDown'
  }
}, {
  value: '9',
  label: '从左至右跳入',
  animate: {
    className: 'zoomInLeft animated',
    dataDelay: '',
    dataAnimate: 'zoomInLeft'
  }
}, {
  value: '10',
  label: '从右至左跳入',
  animate: {
    className: 'zoomInRight animated',
    dataDelay: '',
    dataAnimate: 'zoomInRight'
  }
}, {
  value: '11',
  label: '从下至上跳入',
  animate: {
    className: 'zoomInUp animated',
    dataDelay: '',
    dataAnimate: 'zoomInUp'
  }
}, {
  value: '12',
  label: '从上至下跳入',
  animate: {
    className: 'zoomInDown animated',
    dataDelay: '',
    dataAnimate: 'zoomInDown'
  }
}, {
  value: '13',
  label: '放大',
  animate: {
    className: 'bounceIn animated',
    dataDelay: '',
    dataAnimate: 'bounceIn'
  }
}, {
  value: '14',
  label: '中间伸展',
  animate: {
    className: 'zoomIn animated',
    dataDelay: '',
    dataAnimate: 'zoomIn'
  }
}, {
  value: '15',
  label: '中间渐变',
  animate: {
    className: 'fadeIn animated',
    dataDelay: '',
    dataAnimate: 'fadeIn'
  }
}, {
  value: '16',
  label: '旋转180度',
  animate: {
    className: 'rotateIn animated',
    dataDelay: '',
    dataAnimate: 'rotateIn'
  }
}, {
  value: '17',
  label: '左右晃动',
  animate: {
    className: 'wobble animated',
    dataDelay: '',
    dataAnimate: 'wobble'
  }
}, {
  value: '18',
  label: '左右摇摆',
  animate: {
    className: 'swing animated',
    dataDelay: '',
    dataAnimate: 'swing'
  }
}, {
  value: '19',
  label: '上下跳动',
  animate: {
    className: 'bounce animated',
    dataDelay: '',
    dataAnimate: 'bounce'
  }
}
]

</script>

<style scoped lang="scss">
.edit-container-u {
  width: 840px;
  min-height: 350px;
  /deep/ .el-tabs__content {
    padding: 55px 0 15px 0;
  }
}
.add-btn {
  margin-top: 20px;
  text-align: right;
}
.cols-list {
  /deep/ table th {
    color: #555;
    font-weight: normal;
  }
  i {
    font-size: 18px;
    cursor: pointer;
    margin: 0 3px;
    &.iconfont {
      font-size: 20px;
    }
    &:hover {
      color: #258ffb;
    }
  }
  .displayNo {
    color: #888888;
    cursor: not-allowed;
    opacity: 0.5;
    &:hover {
      color: #888888;
    }
  }
}
</style>
